<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <style type="text/css">
        .aui-list-item.wechat-top {
            background-color: #f3f3f7;
        }
        .aui-list .wechat-avatar {
            width:3rem;
        }
        .aui-chat .aui-chat-item{
       /*  margin-bottom:0px; */
        }
        .wechat-avatar .aui-row-padded {
            background-color: #dddee0;
            padding: 0.1rem;
            border-radius: 0.2rem;
            margin-left: -0.05rem;
            margin-right: -0.05rem;
        }
        .wechat-avatar .aui-row-padded [class*=aui-col-xs-] {
            padding: 0.05rem;
        }
        .wechat-avatar,
        .wechat-avatar > img {
            border-radius:0.2rem;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
</head>
<body style="font-family: 微软雅黑">
<header class="aui-bar aui-bar-nav" id="aui-header" >
    <a class="aui-btn aui-pull-left" tapmode  onclick="history.back();">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">消息</div>
    <div class="aui-btn aui-pull-right"><span class="aui-iconfont aui-icon-plus" id="addFriend"></span></div>
			
    <div class="aui-btn aui-pull-right" onclick="friendList(this)" ><span class="fa fa-address-book fa-lg" ></span></div>
</header>

<div class="aui-content aui-margin-b-15" style="margin-top: 45px"  id="friendsPage">
   <!-- <ul class="aui-list aui-media-list">
        <li class="aui-list-item aui-list-item-middle wechat-top">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media wechat-avatar">
                    <div class="aui-badge">9</div>
                    <div class="aui-row-padded">
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/demo1.png" />
                        </div>
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/demo2.png" />
                        </div>
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/demo3.png" />
                        </div>
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/demo4.png" />
                        </div>
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/demo5.png" />
                        </div>
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/demo6.png" />
                        </div>
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/demo1.png" />
                        </div>
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/demo3.png" />
                        </div>
                        <div class="aui-col-xs-4">
                            <img src="../../myImage/demo5.png" />
                        </div>
                    </div>
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">AUI微信开发交流群</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text aui-font-size-12">
                        流浪男:欢迎使用AUI 2.0
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item aui-list-item-middle wechat-top">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media wechat-avatar">
                    <div class="aui-row-padded">
                        <div class="aui-col-xs-6">
                            <img src="../../myImage/demo2.png" />
                        </div>
                        <div class="aui-col-xs-6">
                            <img src="../../myImage/demo3.png" />
                        </div>
                        <div class="aui-col-xs-6">
                            <img src="../../myImage/demo1.png" />
                        </div>
                        <div class="aui-col-xs-6">
                            <img src="../../myImage/demo5.png" />
                        </div>
                    </div>

                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">AUI 2.0讨论组</div>
                        <div class="aui-list-item-right">08:00</div>
                    </div>
                    <div class="aui-list-item-text aui-font-size-12">
                        AUI:官方网站 www.auicss.com
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item aui-list-item-middle" onclick="location.href='message.html'">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media wechat-avatar">
                    <div class="aui-badge">9</div>
                    <img src="../../myImage/4.jpg" />
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">胖子</div>
                        <div class="aui-list-item-right">星期一</div>
                    </div>
                    <div class="aui-list-item-text aui-font-size-12">
                        Hello AUI 2.0!
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item aui-list-item-middle">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media wechat-avatar">
                    <img src="../../myImage/demo1.png" />
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">张三</div>
                        <div class="aui-list-item-right">1天前</div>
                    </div>
                    <div class="aui-list-item-text aui-font-size-12">
                        Hello AUI 2.0!
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item aui-list-item-middle">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media wechat-avatar">
                    <div class="aui-dot"></div>
                    <img src="../../myImage/demo4.png" />
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">李四</div>
                        <div class="aui-list-item-right">星期一</div>
                    </div>
                    <div class="aui-list-item-text aui-font-size-12">
                        Hello AUI 2.0!
                    </div>
                </div>
            </div>
        </li>
    </ul>-->
    <div class="aui-card-list-content">
        <ul class="aui-list aui-media-list" id="friendList">
        </ul>
    </div>
    
    <div style="padding-left: 40px;padding-top: 200px;padding-right: 40px; display: none;" class="aui-content aui-margin-b-15" style="text-align: center;padding-top: 200px;" id="popUp">
				<ul class="aui-list aui-form-list">

					<div class="aui-list-item">

						<div class="aui-list-item-inner">
							<div class="aui-label"> 输入好友id:</div>
							<div class="aui-list-item-input">

								<input style="padding-left: 10px;" type="text" id="friendId" />
							</div>

						</div>
					</div>
					<div class="aui-list-item-inner aui-list-item-center aui-list-item-btn">
						<button class="aui-btn aui-btn-info " id="sendAddFriendRequestBtn">添加好友</button>
						<button class="aui-btn aui-btn-danger " id="canceladdFriendRequestBtn">取消</button>
					</div>
				</ul>
			</div>

			<div style="padding-top: 200px; text-align: center;display: none;" id="acceptPop">
				<div id="requestInfo"></div>
				<div class="aui-btn aui-btn-info aui-margin-r-5" id="agree">同意</div>
				<div class="aui-btn aui-btn-danger aui-margin-l-5" id="disagree">不同意</div>
			</div>
</div>
<div id="chatPage" style="display: none;">

    <header class="aui-bar aui-bar-nav">
        <a class="aui-pull-left aui-btn" id="goToFriendPage">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title" id="header"></div>
    </header>
    <section class="aui-chat" style="height:500px;margin-top: 45px;overflow: scroll">
    <div></div>
    
    </section>

   <!-- <div style="padding-top: 400px;" id="info">
        <div style="padding-left: 5px;">请输入发送内容:<input type="text" id="" style="font-size: 20px; " /></div>
        <br />
        <div class="aui-btn aui-btn-primary aui-btn-block aui-btn-sm" id="">发送</div>
    </div>-->
    <footer class="aui-bar aui-bar-tab" id="footer">
        <div class="aui-searchbar">
            <div class="aui-searchbar-input aui-border-radius" tapmode >
                <input type="search" placeholder="请输入留言" id="message">
            </div>
            <div style="margin-right: 10px;font-size: 14px" id="sendMessage">发送</div>
        </div>
    </footer>
   <!-- <div class="file" style="margin-top: 15px;">
        <div id="choosePictureWord"></div>

    </div>
    <input id="uploadPicture" accept="image/x-png;image/jpeg" type="file" style="width: 20%;" />
    <button id="sendPicture">发送图片</button>

    <button id="sendLocation" style="margin-left: 40px;"> 发送定位(假数据,只有经纬度)</button>-->
</div>
</body>
<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script type="text/javascript" src="../../myJs/jquery-1.12.1.min.js" ></script>
<script src="../../myJs/jquery.cookie.js"></script>
<script src="../../myJs/jmessage-sdk-web.2.3.0.min.js"></script>
<script src="../../myJs/md5.js"></script>
<script src="../../AUI/script/aui-toast.js"></script>
<script type="text/javascript" src="../../AUI/script/aui-dialog.js"></script>
<script type="text/javascript">
    apiready = function () {
    }

    function friendList(obj){
        window.location.href="friendList.html";
    }
</script>
<script>
    var JIM = new JMessage();
    var myData;
    var loginUsername = localStorage.loginUsername;
    var loginPassword = localStorage.loginPassword;
    var chatId;
    var chatUserId;
    var toast = new auiToast();
    var dialog = new auiDialog({});
    var lastChatId;
    var requestHistoryInfo = true;
    var nickname=sessionStorage.getItem("nickname");
    var headPortraitUrl = sessionStorage.getItem("headPortraitUrl");
    $(document).ready(function() {
        init();

    })

    /**
     * 跳出添加好友框
     */
    $("#addFriend").click(function() {
        document.getElementById("popUp").style.display = "";

    })

    $("#sendAddFriendRequestBtn").click(function() {
        JIM.addFriend({
            "target_name": $("#friendId").val(),
            "from_type": 1,
            "why": "交个朋友",

        }).onSuccess(
                function(data) {
                    $("#popUp").css("display", "none");
                    toast.success({
                        title: "请求已发送",
                        duration: 2000
                    })

                }
        ).onFail(
                function(data) {
                    alert("请求发送失败");
                }
        )

    })

    function init() {
        var time = new Date().getTime();
        var signature = hex_md5("appkey=a063bae8671dc9c2c3061d63&timestamp=" +
                time + "&random_str=022cd9fd995849b58b3ef0e943421ed9&key=e5d5124b67e1c33c0387a745");

        JIM.init({
            "appkey": "a063bae8671dc9c2c3061d63",
            "random_str": "022cd9fd995849b58b3ef0e943421ed9",
            "signature": signature,
            "timestamp": time,
            "flag": 1
        }).onSuccess(function(data) {
            console.log('success:' + JSON.stringify(data));
            alert(loginUsername)
            login();
        }).onFail(function(data) {
            console.log("fail")
        })
    }

    function login() {
        JIM.login({
            "username": loginUsername,
            "password": loginPassword
        }).onSuccess(function(data) {
                    JIM.isConnect();
                    //searchFriend();
                    listrnFriendRequest();
                    getUserMessage();
                    getConversation();
                    //getSyncConversation();
                  

                })
                .onFail(function(data) {

                    //alert("登录失败"+JSON.stringify(data))

                    console.log("登录失败" + JSON.stringify(data));
                })
    }

    function getConversation() {
        JIM.getConversation().onSuccess(function(data) {
            //alert(JSON.stringify(data))
            $.each(data.conversations, function() {
                if(this.name != loginUsername) {
                    $("#friendList").append('<li class="aui-list-item aui-list-item-middle friendListClass" id=" + this.name + " >\
                            <div class="aui-media-list-item-inner">\
                            <div class="aui-list-item-media wechat-avatar">\
                            <img src="'+headPortraitUrl+'" />\
                            </div>\
                            <div class="aui-list-item-inner">\
                            <div class="aui-list-item-text">\
                            <div class="aui-list-item-title" id="friendIdInList" chatId="'+this.name+'">'+this.nickName+'</div>\
                            <div class="aui-list-item-right">1天前</div>\
                    </div>\
                    <div class="aui-list-item-text aui-font-size-12">\
                            Hello AUI 2.0! </div>\
                </div>\
                </div>\
                </li>');

                }
            })
        }).onFail(function() {
            alert("获取消息失败")
        })
    }

    function getSyncConversation() {
        JIM.onSyncConversation(function(data) {
            //alert(JSON.stringify(data))
        });
    }

    function listrnFriendRequest() {
        JIM.onEventNotification(
                function(data) {
                    if(data.event_type == 5) {
                        someOneAddYou(data);
                    }
                }
        )
    }

    function someOneAddYou(data) {
        myData = data;
        $("#acceptPop").css("display", "");
        $("#requestInfo").append("id为:" + data.from_username + "请求加您为好友");

    }

    $("#agree").click(
            function() {
                JIM.addFriend({
                    'target_name': myData.from_username,
                    'from_type': '2',
                    'why': "",
                }).onSuccess(function(data) {
                    //data.code 返回码
                    //data.message 描述
                    toast.success({
                        title: "添加成功",
                        duration: 1000

                    })
                    $("#acceptPop").css("display", "none");
                    searchFriend();
                }).onFail(function(data) {
                    // 同上
                });
            }
    )

    $("#disagree").click(
            function() {
                JIM.addFriend({
                    'target_name': myData.from_username,
                    'from_type': '2',
                    'why': "不同意",
                }).onSuccess(function(data) {
                    //data.code 返回码
                    //data.message 描述
                    toast.success({
                        title: "已拒绝请求",
                        duration: 1000

                    })

                    $("#acceptPop").css("display", "none");
                }).onFail(function(data) {
                    // 同上
                });
            }
    )

    function searchFriend() {
        JIM.getFriendList()
                .onSuccess(function(data) {
                    //alert(JSON.stringify(data));
                    $("#friendList").text("");
                    $.each(data.friend_list, function() {
                        addFriendToList(this);
                    });
                    /*$("li").on("click",function(){chatId=this.id;alert(chatId)})*/
                })
    }

    function addFriendToList(friend) {
        $("#friendList").append("<li class='aui-list-item aui-list-item-middle' id=" + friend.username + "  class='friendListClass'>" +
                "<div class='aui-media-list-item-inner'>" +
                "<div class='aui-list-item-media'>" +
                "<img  class='aui-img-round aui-list-img-sm'/>" +
                "</div>" +
                "<div class='aui-list-item-inner' id='friendIdInList'>" +
                friend.username +
                "</div>" +
                "</div>" +
                "</li>");

    }


    /**
     * 页面跳转
     */
    $(document).on("click", "li", function() {
        goToChatPage(this);
    })

    function goToChatPage(element) {
        chatId = $(element).find(".aui-list-item-title").attr("chatId");alert(chatId);
        chatUserId = $(element).find(".aui-list-item-title").text();
        //alert(chatId);
        if(lastChatId != localStorage.chatId) {
            $("section").text("");
            lastChatId = chatId;
        } else {
            requestHistoryInfo = false;
        }

        $("#friendsPage").css("display", "none");
        $("#chatPage").css("display", "");
        $("#header").text("");
        $("#header").append(chatUserId);
    }

    $("#canceladdFriendRequestBtn").click(function() {
        $("#popUp").css("display", "none")
    })


    /**
     *
     *
     *
     * 聊天页面代码
     *
     *
     *
     *
     */

    $("#goToFriendPage").click(function() {
        $("#friendsPage").css("display", "");
        $("#chatPage").css("display", "none")
    });


    $("#choosePictureWord").click(function(){
        $("#uploadPicture").click();
    })

    $("#sendPicture").click(function()
    {
        if($("#uploadPicture").val()=="")
            return false;
        var picture = new FormData($("#form"));

        JIM.sendSinglePic({
            'target_username' : chatId,
            'image' : getFile(),
        }).onSuccess(function(data , msg) {
            //alert(JSON.stringify(data))
            //alert(JSON.stringify(msg))
            //addMsgLeft(JSON.stringify(msg))
            //addMsgRight(JSON.stringify(data))
            console.log(JSON.stringify(msg))
            //$("#uploadPicture").val("")
            var media_id = msg.content.msg_body.media_id;
            //alert(media_id)
            addPicRight("http://dl.im.jiguang.cn/"+media_id+"")

        }).onFail(function(data) {
            //同发送单聊文本

            alert(JSON.stringify(data))
        });


    })

    function getFile() {
        var fd = new FormData();
        var file =document.getElementById("uploadPicture");
        if(!file.files[0]) {
            appendToDashboard('error:' + '获取文件失败');
            throw new Error('获取文件失败');
        }
        fd.append(file.files[0].name, file.files[0]);
        return fd;
    }




    function getUserMessage() {
        JIM.onMsgReceive(function(data) {
            $(data.messages).each(function() {
                addMsgLeft(this);
            })
        })

    }


    $("#sendMessage").click(function() {
    	alert(chatId);
        JIM.sendSingleMsg({
            "target_username": chatId,
            "content": $("#message").val(),
            "no_notification": true
        }).onSuccess(function(data) {
        	alert(1);
            addMsgRight($("#message").val());
            document.getElementById("message").value = "";
        }).onFail(function(data){
        	alert(JSON.stringify(data));
        })
    })

    $("#sendLocation").click(function()
    {
        JIM.sendSingleLocation({
            'target_username' : chatId,
            'latitude' : 30.3089800000,
            'longitude' : 120.3889900000,
            'scale' : 1,
            'label' : '浙江工商大学'
        }).onSuccess(function(data , msg) {
            addLocationRight(30.3089800000,120.3889900000,'浙江工商大学');
        }).onFail(function(data) {
        });
    })




    function addMsgLeft(message) {
    	//alert(JSON.stringify(message));
        $(".aui-chat").append(
                "<div class='aui-chat-item aui-chat-left'>" +

                "<div class='aui-chat-inner'>" +
                "<div class='aui-chat-name'>" + message.content.from_name + " <span class='aui-label aui-label-warning'></span></div>" +
                "<div class='aui-chat-content'>" +
                "<div class='aui-chat-arrow'></div>" +
                message.content.msg_body.text +
                "</div>" +

                "</div>" +
                "</div>"
        )
    }
var i=0;
    function addMsgRight(content) {
    	//alert(JSON.stringify(content));
        $(".aui-chat").append(
                "<div class='aui-chat-item aui-chat-right'>" +

                "<div class='aui-chat-inner'>" +
                "<div class='aui-chat-name'>" + nickname + " <span class='aui-label aui-label-warning'></span></div>" +
                "<div class='aui-chat-content'>" +
                "<div class='aui-chat-arrow' id='"+i+"'></div>" +
                content +
                "</div>" +
                "<div class='aui-chat-status aui-chat-status-refresh'>" +
                "<i class='aui-iconfont aui-icon-correct aui-text-success'></i>" +
                "</div>" +
                "</div>" +
                "</div>"
        )
        window.location.hash="#"+1;
        i++;
    }



    function addPicLeft(message) {
        $(".aui-chat").append(
                "<div class='aui-chat-item aui-chat-left'>" +

                "<div class='aui-chat-inner'>" +
                "<div class='aui-chat-name'>" + message.content.from_id + " <span class='aui-label aui-label-warning'></span></div>" +
                "<div class='aui-chat-content'>" +
                "<div class='aui-chat-arrow'></div>" +
                message.content.msg_body.text +
                "</div>" +

                "</div>" +
                "</div>"
        )
    }


    function addPicRight(url) {

        $(".aui-chat").append(
                "<div class='aui-chat-item aui-chat-right'>" +

                "<div class='aui-chat-inner'>" +
                "<div class='aui-chat-name'>" + loginUsername + " <span class='aui-label aui-label-warning'></span></div>" +
                "<div class='aui-chat-content'>" +
                "<div class='aui-chat-arrow'></div>" +
                "<img src="+url+">" +
                "</div>" +
                "<div class='aui-chat-status aui-chat-status-refresh'>" +
                "<i class='aui-iconfont aui-icon-correct aui-text-success'></i>" +
                "</div>" +
                "</div>" +
                "</div>"
        )
    }

    function addLocationLeft(message) {
        $(".aui-chat").append(
                "<div class='aui-chat-item aui-chat-left'>" +

                "<div class='aui-chat-inner'>" +
                "<div class='aui-chat-name'>" + message.content.from_id + " <span class='aui-label aui-label-warning'></span></div>" +
                "<div class='aui-chat-content'>" +
                "<div class='aui-chat-arrow'></div>" +
                message.content.msg_body.text +
                "</div>" +

                "</div>" +
                "</div>"
        )
    }


    function addLocationRight(latitude,longitude,label) {

        $(".aui-chat").append(
                "<div class='aui-chat-item aui-chat-right'>" +

                "<div class='aui-chat-inner'>" +
                "<div class='aui-chat-name'>" + loginUsername + " <span class='aui-label aui-label-warning'></span></div>" +
                "<div class='aui-chat-content'>" +
                "<div class='aui-chat-arrow'></div>" +
                "经度:"+latitude+",纬度:"+longitude+",地点:"+label+
                "</div>" +
                "<div class='aui-chat-status aui-chat-status-refresh'>" +
                "<i class='aui-iconfont aui-icon-correct aui-text-success'></i>" +
                "</div>" +
                "</div>" +
                "</div>"
        )
    }
</script>
</html>